<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script>
        window.onload=function(){
            var div1=document.getElementById("div1");
            var div2=document.getElementById("div2");
            var div3=document.getElementById("div3");
            var strDom = "<h1>标签\n字符串</h1>";

            div1.innerText=strDom
            div2.innerHTML=strDom
            div3.textContent=strDom
        }
    </script>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>

    <div id="app">
        <p>{{msg}}</p>
        <p>{{num}}</p>
        <p>{{flag}}</p>
        <p>{{arr}}</p>
        <p>{{user}}</p>
        <p>{{undefined}}</p>
        <p>{{null}}</p>
        <p>{{arg1}}</p>
        <p>{{img}}</p>
        <p>{{day}}</p>


        <p>{{"string"}}</p>
        <p>{{`string ${msg}${user.name}`}}</p>
        <p>{{[1,2,3,4]}}</p>
        <p>{{ arr[0] }}</p>
        <p>{{msg+"哈哈哈哈哈哈"}}</p>
        <p>{{Math.random()}}</p>
        <p>{{isNaN(msg)}}</p>
        <p>{{JSON.stringify(user)}}</p>

        <p>{{h1Str}}</p>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"消息",
            num:100,
            flag:true,
            arr:[1,2,3,4],
            user:{
                name:"tom",
                age:23
            },
            arrObj:{
                arr1:[1,2,3],
                arr2:[4,5,6]
            },
            arg1:null,
            arg2:undefined,
            img:new Image(),
            day:new Date(),
            h1Str:"<h1>H1\n标签</h1>"
        }
    });
</script>
</html>